<script setup lang="ts">
import { computed,onMounted } from "vue";
import uploadImageListCase from '@/components/uploadImageListCase.vue'
import EditorCase from '@/components/EditorCase.vue'
import { reactive, defineProps } from "vue";
const props = defineProps(["close", "params"]);
const ruleForm = reactive({
  keyName: "",
  gallery: [],
  content: "",
});
onMounted(()=>{
  ruleForm.keyName = props.params.detail?.keyName ?? "";
  ruleForm.gallery = props.params.detail?.gallery ?? [];
  ruleForm.content = props.params.detail?.content ?? "";
})
</script>
<template>
  <div class="page">
    <div class="main">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="80"
      >
        <el-form-item label="规格名称" prop="keyName">
          <el-input v-model="params.detail.keyName" placeholder="请输入规格名称" disabled/>
        </el-form-item>
        <el-form-item label="规格画册" prop="gallery">
          <upload-image-list-case v-model="ruleForm.gallery" action="common/uploadPic" name="img" list-type="picture-card"></upload-image-list-case>
        </el-form-item>
        <el-form-item label="规格详情" prop="content">
          <editor-case v-model="ruleForm.content"></editor-case>
        </el-form-item>
        <el-form-item class="active">
          <el-button type="primary" @click="close(ruleForm)">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>